<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>庄磊简历</title>
    <meta name="viewport" content="width=device-width" />
    <!-- favicon图标 -->
    <link
      rel="shortcut icon"
      href="../../static/favicon.png"
      type="image/x-icon"
    />
    <!-- 51la网站统计 -->
    <script src="../../static/js/tongji.js"></script>
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <!-- ------------ 个人简历 start------------ -->
    <div class="resume-container" id="app">
      <hr />
      <div class="resume-content">
        <!-- ------------ 简历头部 start------------ -->
        <header class="resume-head">
          <div class="head-left">
            <!-- 姓名 -->
            <h1>{{datas.xinxi.user}}</h1>
            <!-- 求职意向 -->
            <div class="qiuzhi">
              <strong>{{datas.xinxi.name}}：</strong>{{datas.xinxi.text}}
            </div>

            <ul>
              <li>
                <a :href="'tel:'+datas.xinxi.phone1">{{datas.xinxi.phone}}</a>
              </li>
              <li>
                <a :href="'mailto:'+datas.xinxi.email1"
                  >{{datas.xinxi.email}}</a
                >
              </li>
            </ul>

            <!-- <ul>
              <li
                v-for="(item, index) in datas.xinxi.data"
                :key="index"
                v-show="index<2"
              >
                {{item.text}}
              </li>
            </ul> -->
          </div>
          <div class="head-right">
            <img :src="datas.xinxi.img" alt="" />
          </div>
        </header>

        <!-- ------------ 简历头部  end ------------ -->

        <!-- ------------ 简历主体 start------------ -->
        <div class="resume-main">
          <!-- ------------ 教育背景 start------------ -->
          <div class="module jiaoyu">
            <div class="module-title">{{datas.jiaoyu.title}}</div>
            <div class="module-content">
              <div
                class="module-wrap"
                v-for=" (item, index) in datas.jiaoyu.data"
                :key="index"
              >
                <ul class="col-4">
                  <li>{{ item.name }}</li>
                  <li>{{ item.type }}</li>
                  <li>{{ item.text }}</li>
                  <li>{{ item.time }}</li>
                </ul>
              </div>
            </div>
          </div>
          <!-- ------------ 教育背景  end ------------ -->

          <!-- ------------ 工作经验 start------------ -->
          <div class="module gongzuo">
            <div class="module-title">{{datas.gongzuo.title}}</div>
            <div class="module-content">
              <div
                class="module-wrap"
                v-for="(item, index) in datas.gongzuo.data"
                :key="index"
                v-show="index<5"
              >
                <ul class="col-3">
                  <li>{{item.name}}</li>
                  <li>{{item.type}}</li>
                  <li>{{item.time}}</li>
                </ul>
                <div class="item-edit">
                  <ul v-for="(item, index) in item.data" :key="index">
                    <li>{{item.text}}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- ------------ 工作经验  end ------------ -->

          <!-- ------------ 项目经验 start------------ -->
          <div class="module xiangmu" v-if="datas.xiangmu">
            <div class="module-title">{{datas.xiangmu.title}}</div>
            <div class="module-content">
              <div
                class="module-wrap"
                v-for="(item, index) in datas.xiangmu.data"
                :key="index"
                v-show="index<2"
              >
                <!-- 左右两行 -->
                <ul class="item-col2">
                  <li v-if="item.name">{{item.name}}</li>
                  <li v-if="item.text">{{item.text}}</li>
                </ul>
                <div class="item-edit">
                  <!-- 项目介绍 -->
                  <p v-for="(item, index) in item.jieshao" :key="index">
                    <strong>{{item.name}}：</strong><span>{{item.text}}</span>
                  </p>
                  <!-- 项目职责 -->
                  <div>
                    <strong>{{item.zhize.name}}：</strong>
                    <ul>
                      <li v-for="(item, index) in item.zhize.data" :key="index">
                        {{item.text}}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- ------------ 项目经验  end ------------ -->

          <!-- ------------ 专业技能 start------------ -->
          <div class="module jineng" v-if="datas.jineng">
            <div class="module-title">{{datas.jineng.title}}</div>
            <div class="module-content">
              <div class="module-wrap">
                <div class="item-edit">
                  <ul>
                    <li
                      v-for="(item, index) in datas.jineng.data"
                      :key="index"
                      v-show="index < 10 "
                    >
                      {{item.text}}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- ------------ 专业技能  end  ------------ -->

          <!-- ------------ 培训经历 start ------------ -->
          <div class="module peixun" v-if="datas.peixun">
            <div class="module-title">{{datas.peixun.title}}</div>
            <div class="module-content">
              <div
                class="module-wrap"
                v-for="(item, index) in datas.peixun.data"
                :key="index"
                v-show="index<4"
              >
                <ul class="col-3">
                  <li>{{item.name}}</li>
                  <li>{{item.type}}</li>
                  <li>{{item.time}}</li>
                </ul>
              </div>
            </div>
          </div>
          <!-- ------------ 培训经历  end  ------------ -->

          <!-- ------------ 荣誉证书zhengshu start ------------ -->
          <div class="module zhengshu" v-if="datas.zhengshu">
            <div class="module-title">{{datas.zhengshu.title}}</div>
            <div class="module-content">
              <div class="module-wrap">
                <div class="col-2">
                  <!-- 左边 -->
                  <ul>
                    <li
                      v-for="(item, index) in datas.zhengshu.data.ry"
                      :key="index"
                      v-show="index<6"
                    >
                      {{item.name}}{{item.text}}
                    </li>
                  </ul>
                  <!-- 右边 -->
                  <ul>
                    <li
                      v-for="(item, index) in datas.zhengshu.data.zs"
                      :key="index"
                      v-show="index<6"
                    >
                      {{item.name}}{{item.text}}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- ------------ 荣誉证书zhengshu end  ------------ -->
          <!-- ------------ 荣誉证书ryzs start ------------ -->
          <div class="module zhengshu" v-if="datas.ryzs0">
            <div class="module-title">{{datas.ryzs.title}}</div>
            <div class="module-content">
              <div class="module-wrap">
                <div class="col-2">
                  <ul>
                    <li v-for="(item, index) in datas.ryzs.data" :key="index">
                      <strong>{{item.name}}：</strong>{{item.text}}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- ------------ 荣誉证书ryzs end  ------------ -->

          <!-- ------------ 个人评价 start ------------ -->
          <div class="module pingjia" v-if="datas.pingjia">
            <div class="module-title">{{datas.pingjia.title}}</div>
            <div class="module-content">
              <div class="module-wrap">
                <div class="item-edit">
                  <ul>
                    <li
                      v-for="(item, index) in datas.pingjia.data"
                      :key="index"
                      v-show="index < 6 "
                    >
                      {{item.text}}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- ------------ 个人评价 end  ------------ -->
        </div>
        <!-- ------------ 简历主体  end  ------------ -->

        <!-- ------------ 底部版权 start------------ -->
        <div class="resume-foot">
          &copy; <a :href="'//'+datas.foot.text">{{datas.foot.title}}</a>
        </div>
        <!-- ------------ 底部版权  end  ------------ -->
      </div>
    </div>
    <!-- ------------ 个人简历  end  ------------ -->
    <script src="./js/vue-3.3.3.global.prod.js"></script>
    <script type="text/javascript">
      const { createApp, ref } = Vue;
      createApp({
        setup() {
          // 定义一个ref作为响应数据的容器
          const datas = ref(null);
          (async function () {
            // 替换为实际的JSON数据源URL
            const url = "api/data.json";
            try {
              // 1. 发起fetch请求
              const response = await fetch(url);
              // 2. 检查请求是否成功（HTTP状态码在200-299之间）
              if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
              }
              // 3. 解析JSON响应体
              const res = await response.json();
              // 将解析后的JSON数据赋值给datas.ref
              datas.value = res.content;
              // 4. 使用获取到的JSON数据
              console.log("Fetched JSON data:", res);
              // 在这里对数据进行进一步处理，如更新UI、存储数据等
            } catch (error) {
              // 处理请求或解析过程中出现的任何错误
              console.error("Error fetching JSON data:", error.message);
            }
          })();
          return {
            datas,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
